<!DOCTYPE html><!--[if IE 7]>
<html lang="en" class="ie7 oldie"></html><![endif]--><!--[if IE 8]>
<html lang="en" class="ie8 oldie"></html><![endif]-->
<!-- [if gt IE 8] <!-->
<html lang="en">
  <!-- <![endif]-->
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FlexNav - A jQuery Plugin for Responsive Menus</title>
    <link href="css/flexnav.css" media="screen, projection" rel="stylesheet" type="text/css">
    <link href="css/page.css" media="screen, projection" rel="stylesheet" type="text/css">
	<link href="css/font-awesome.css" media="screen, projection" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="//use.typekit.net/qyb8ood.js"></script>
    <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
  </head>
  <body class="home-page">
    <div class="container">
      <header id="site-header">
        <hgroup class="site-title">
          <h1>FlexNav</h1>
          <h2 class="site-title-sub">A jQuery Plugin for Responsive Menus</h2>
      
      
      <a href="https://twitter.com/share" class="twitter-share-button" data-via="mrJasonWeaver" data-url="http://jasonweaver.name/lab/flexiblenavigation" data-size="large">Tweet</a>
      <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
      
        </hgroup>
        <div class="menu-button">Menu</div>
        <nav>
          <ul data-breakpoint="800" class="flexnav">
            <li><a href="">Item 1</a>
              <ul>
                <li> <a href="#content">Sub 1 Item 1</a></li>
                <li><a href="/">Sub 1 Item 2</a></li>
                <li><a href="/">Sub 1 Item 3</a></li>
                <li><a href="/">Sub 1 Item 4</a></li>
              </ul>
            </li>
            <li><a href="/">Item 2</a>
              <ul>
                <li><a href="/">Sub 1 Item 1</a></li>
                <li><a href="/">Sub 1 Item 2</a>
                  <ul>
                    <li><a href="/">Sub 2 Item 1</a></li>
                    <li><a href="http://jasonweaver.name/">Sub 2 Item 2</a></li>
                    <li><a href="http://jasonweaver.name/">Sub 2 Item 3</a></li>
                  </ul>
                </li>
                <li><a href="http://jasonweaver.name/">Sub 1 Item 3</a>
                  <ul>
                    <li><a href="http://jasonweaver.name/">Sub 2 Item 1</a></li>
                    <li><a href="http://jasonweaver.name/">Sub 2 Item 2</a>
                      <ul>
                        <li><a href="http://jasonweaver.name/">Sub 3 Item 1</a></li>
                        <li><a href="http://jasonweaver.name/">Sub 3 Item 2</a></li>
                        <li><a href="http://jasonweaver.name/">Sub 3 Item 3</a></li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li><a href="http://jasonweaver.name/">Item 3</a>
              <ul>
                <li><a href="http://jasonweaver.name/">Sub 1 Item 1</a></li>
                <li><a href="http://jasonweaver.name/">Sub 1 Item 2</a></li>
                <li><a href="http://jasonweaver.name/">Sub 1 Item 3</a></li>
              </ul>
            </li>
            <li><a href="">Item 4</a>
              <ul>
                <li><a href="http://jasonweaver.name/">Sub 1 Item 1</a></li>
                <li><a href="http://jasonweaver.name/">Sub 1 Item 2</a></li>
                <li><a href="http://jasonweaver.name/">Sub 1 Item 3</a></li>
              </ul>
            </li>
            <li><a href="http://jasonweaver.name/">Item 5</a>
              <ul>
                <li><a href="http://jasonweaver.name/">Sub 1 Item 1</a></li>
                <li><a href="http://jasonweaver.name/">Sub 1 Item 2</a></li>
                <li><a href="http://jasonweaver.name/">Sub 1 Item 3</a></li>
              </ul>
            </li>
          </ul>
        </nav>
      </header>
      <section id="content" role="main">
        <article>
          <div class="article-wrap">
            <div class="block">
              <h2>A Device-Agnostic Approach to Complex Site Navigation</h2>
              <p>FlexNav is a mobile-first example of using media queries and javascript to make a decent multi-level menu with support for touch, hover reveal, and keyboard tab input accessibility. Special attention is paid to touch screens using tap targets (the key feature of FlexNav).
                
                <p><strong>Note:</strong> If you find a bug, please <a href="https://github.com/indyplanets/flexnav/issues">file an issue</a> and note device and browser versions.</p>
  			 <p>
				 <div class="github-buttons-wrap">
						<iframe src="http://ghbtns.com/github-btn.html?user=indyplanets&repo=flexnav&type=watch&count=true&size=large"
     allowtransparency="true" frameborder="0" scrolling="0" width="140" height="30" class="github-watch"></iframe>
	 					<iframe src="http://ghbtns.com/github-btn.html?user=indyplanets&repo=flexnav&type=fork&count=true&size=large"
       allowtransparency="true" frameborder="0" scrolling="0" width="140" height="30" class="github-watch"></iframe>
				</div>
				<a href="https://github.com/indyplanets/flexnav" class="callout">Download on GitHub &rarr;</a>
			</p>
		</div>
		<div class="block">
			<section class="video-wrap">
				<video id="video" loop="true" poster="http://jasonweaver.name/lab/flexiblenavigation/images/flexnav-placeholder.png">
				  <source src="http://jasonweaver.name/lab/flexiblenavigation/video/flexnav.mp4" type='video/mp4' />
				  <source src="http://jasonweaver.name/lab/flexiblenavigation/video/flexnav.webm" type='video/webm' />
				  <img src="http://jasonweaver.name/lab/flexiblenavigation/images/flexnav-placeholder.png" />			  
				</video>
				<div class="controls">
					<button type="button" class="pause"><i class="icon-play"></i><i class="icon-pause"></i></button>
				</div>
			</section>
            </div>
            <div class="block">
              <h2>Basic Usage</h2>
              <p>Start with a simple unordered list, adding in the class and data attributes:<code>&lt;ul class="flexnav" data-breakpoint="800"&gt; &lt;li&gt...&lt;/li&gt &lt;/ul&gt;</code></p>
              <p>Add the small screen menu button somewhere outside your navigation markup:<code>&lt;div class="menu-button"&gt;Menu&lt;/div&gt;</code></p>
              <p>Add flexnav.css to the head of your document:<code>&lt;link href="css/flexnav.css" rel="stylesheet" type="text/css" /&gt;</code></p>
              <p>Add jquery.flexnav.min.js before the closing body tag:<code>&lt;script type="text/javascript" src="js/jquery.flexnav.min.js"&gt;&lt;/script&gt;</code></p>
              <p>Initialize FlexNav right before your closing body tag:<code>$(".flexnav").flexNav();</code></p>
              <p>you can change the default speed too:<code>$(".flexnav").flexNav({ 'animationSpeed' : 'fast' });</code></p>
		  </div>
		  <div class="block">
			  <h2>Options</h2>
				<p><code>
				'animationSpeed' : 250, <span> // default drop animation speed</span> <br>
		    'transitionOpacity': true, <span> // default opacity animation</span> <br>
		    'buttonSelector': '.menu-button', <span> // default menu button class</span> <br>
		    'hoverIntent': false, <span> // use with hoverIntent plugin</span> <br>
		    'hoverIntentTimeout': 150, <span> // hoverIntent default timeout</span> <br>
        'calcItemWidths': false, <span> // dynamically calcs top level nav item widths</span> <br>
        'hover': true <span> // would you like hover support?</span> <br>
				</code></p>	
            </div>
          </div>
        </article>
        <article>
          <div class="article-wrap">
			  <div class="block">
				  <h2>FlexNav Mega Menus</h2>
				  <img src="http://jasonweaver.name/lab/flexiblenavigation/images/flexnav-mega-menu.png" alt="flexnav mega menus" class="img-devices">
			</div>
  	 		<div class="block">
                <h2>Features</h2>
                <ul>
                  <li>Multiple nested sub menus</li>
                  <li>Tap targets to reveal sub menus for touch screens</li>
                  <li>Hover reveal for desktop</li>
                  <li>Keyboard tab input accessibility</li>
                </ul>
              </div>
			  <div class="block">
				  <h2>FlexNav with Icon Fonts</h2>
				  <a href="http://dribbble.com/shots/691109-Level-1" title="FlexNav with font awesome - by Seth Warburton"><img src="http://jasonweaver.name/lab/flexiblenavigation/images/level1-1.png" alt="flexnav with font awesome - by Seth Warburton" class="img-devices"></a>
			</div>
            <div class="block">
              <h2>Browser Support</h2>
              <ul>
                <li>IE7-10</li>
                <li>Latest Safari</li>
                <li>Latest Chrome</li>
                <li>Latest FireFox</li>
                <li>Android 2.2 to Latest</li>
                <li>Mobile Safari</li>
              </ul>
            </div>
          </div>
        </article>
      </section>
    </div>
    <footer id="site-footer">
      <div class="container">
        <ul>
          <li>Code by <a href="http://jasonweaver.name">Jason Weaver</a></li>
          <li><a href="https://github.com/indyplanets/flexnav/issues">File a bug</a></li>
		  <li class="push"><iframe src="http://ghbtns.com/github-btn.html?user=indyplanets&type=follow&count=true&size=large"
  allowtransparency="true" frameborder="0" scrolling="0" width="250" height="30"></iframe></li>
        </ul>
      </div>
    </footer>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
      //$.noConflict();
    </script>
    <script src="js/jquery.flexnav.js" type="text/javascript"></script>
    <script type="text/javascript">
		
		var Video = {};

		Video.videoControls = function() {
			var $v = $('#video'),
				$play_button = $(".controls button");			
			$v.get(0).volume=0;
			$play_button.hide();
		  	$play_button.on("click", function() {
				if ( $(this).hasClass("play") ) {
					$v.get(0).play();
					$(this).removeClass("play").addClass("pause");
				} else if ( $(this).hasClass("pause") ) {
					$v.get(0).pause();
					$(this).removeClass("pause").addClass("play");
				}
			});

		    if ($v.attr('controls') !== 'true') {
		        $v.attr('controls', 'true');                    
		    }
		    $v.get(0).play();
		    $v.removeAttr('controls');
			$v.on("timeupdate", function() {
				if ($v.get(0).duration > 0) {
			        setTimeout(function() {
			          $play_button.fadeIn('slow');
			        }, 2000);				
				}
			});
		};

		jQuery(document).ready(function($) {
			// initialize video
			Video.videoControls();
			
			// initialize FlexNav
			$(".flexnav").flexNav();
		});
		
    </script>
  </body>
</html>
